<template>
  <div class='module'>
    <div class='title'>3日盈亏对比</div>
    <div ref='charDom' style='height:330px;width:330px;'></div>
  </div>
</template>

<script>
const echarts = require('echarts')

export default {
  props: ['dataList'],
  components: {},
  data(){
    return {
      currentNav: '',
      myChart: null
    }
  },
  watch: {
    dataList () {
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    if (!this.dataList.length) return
    this.getOption()
  },
  methods: {
    getOption () {
      let data = this.getData()
      console.log(data)
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          borderColor: '#104db1',
          backgroundColor: '#104db1',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          right: '16%',
          bottom: '14%'
        },
        xAxis: {
          type: 'category',
          data: data.dataStr,
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            name: '万元',
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                lineStyle: {
                    color: 'gray',
                    opacity: 0.5
                }
            }
        },
        legend: {
            show: true,
            textStyle: {
                color: '#fff'
            },
            top: '5%',
            icon: 'rect',
            itemWidth: 14
        },
        series: [
            {   
                name: '盈亏',
                color: '#09c49a',
                data: data.profits,
                type: 'bar'
            },
            {
                name: '收入',
                color: '#30ccfb',
                itemStyle: {
                    borderRadius: [4,4,0,0]
                },
                data: data.income,
                type: 'bar'
            },
            {
                name: '投入',
                data: data.cost,
                type: 'bar',
                color: '#fe7d00',
                itemStyle: {
                    borderRadius: [0,0,4,4]
                },
                // markLine: {
                //     label: {
                //       show: true,
                //       formatter: '固定费用',
                //       textBorderWidth: 0,
                //       color: '#fff'
                //     },
                //     silent: true,
                //     lineStyle: {
                //       color: '#fff'
                //     },
                //     symbol: 'none',
                //     data: [
                //       {
                //         yAxis: data.fixed
                //       }
                //     ]
                //   }
            },
        ]
      })
    },
    getData () {
      let temp = {
        cost: [],
        income: [],
        profits: [],
        dataStr: [],
        fixed: -2
      }
      this.dataList.forEach((item, index) => {
        console.log(item)
        if (index === 2) {
          temp.profits.push(
            {value: this.util.twoFixedW(item['实际盈亏']), itemStyle: {
                color: '#0c2f74',
                borderColor: '#09c49a',
                borderWidth: 2,
                borderRadius: item['实际盈亏'] > 0 ? [4,4,0,0] : [0, 0,4,4]
            }}
          )
          temp.cost.push(
            {value: -this.util.twoFixedW(item['实际投入']), itemStyle: {
                color: '#0c2f74',
                borderColor: '#fe7d00',
                borderWidth: 2,
            }}
          )
          temp.income.push({value: this.util.twoFixedW(item['实际收入']), itemStyle: {
              color: '#0c2f74',
              borderColor: '#30ccfb',
              borderWidth: 2,
          }})
        } else {
          temp.cost.push(-this.util.twoFixedW(item['实际投入']))
          temp.income.push(this.util.twoFixedW(item['实际收入']))
          temp.profits.push(
            {
              value: this.util.twoFixedW(item['实际盈亏']),
              itemStyle: {
                borderRadius: item['实际盈亏'] > 0 ? [4,4,0,0] : [0, 0,4,4]
              }
            }
          )
        }
        let strArr = item['dataTime'].split('-')
        temp.dataStr.push(strArr[1] + '/' + strArr[2])
      })
      return temp
    }
  }
}
</script>
<style scoped lang='less'>
.module {
  background-image: url(../../../../assets/chartBg/FinanceBoard4.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  width: 392px;
  height: 335px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;

  .title {
    font-size: 24px;
    font-weight: 400;
    color: #E9F2F9;
    text-align: center;
    padding-top: 18px;
  }

}

</style>
